<template>
  <div class="home-mapviews">
    <div id="home-mapviews"></div>
    <!-- <div class="lenged">
      <div class="startbox">
        <img src="../../assets/img/HomePage/sfxm2.png" alt srcset />
        <span>正常</span>
      </div>
      <div class="startbox">
        <img src="../../assets/img/HomePage/sfxm.png" alt srcset />
        <span>异常</span>
      </div>
    </div>-->
    <div class="select centerbox">
      <!-- <el-select size="mini" v-model="currentBdz" style="width:1.6rem;" clearable @change="change">
        <el-option
          :label="item.BDZMC"
          :value="item.BDZID"
          v-for="(item,index) in options"
          :key="index"
        ></el-option>
      </el-select>-->
      <div class="arrow centerbox" @click="show=!show">
        <div class="el-icon-d-arrow-right"></div>
      </div>
      <transition name="slide-fade">
        <div class="centerbox treecon" v-if="show">
          <div>
            <div class="inputcon">
              <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
            </div>
            <el-tree
              :data="options"
              icon-class="custom"
              :props="defaultProps"
              ref="tree"
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            >
              <div slot-scope="{ node }">
                <div :title="node.label">
                  <span>{{ node.label }}</span>
                </div>
              </div>
            </el-tree>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { HomepageModule } from "@/store/modules/Homepage";
import maptalks from "./maptalks";
import lodash from "lodash";
import { Tree } from "element-ui";
import { log } from "three";
@Component
export default class extends Vue {
  defaultProps = {
    children: "children",
    label: "BDZMC",
    isLeaf: "isLeaf",
  };
  show = false;
  filterText: string = "";
  @Watch("filterText")
  private watchfilterText(val: string) {
    let tree = this.$refs.tree;
    if (tree) {
      tree.filter(val);
    }
  }
  $refs!: {
    tree: Tree;
  };
  filterNode(value: string, data) {
    if (!value) return true;
    return data.BDZMC.indexOf(value) !== -1;
  }
  mapviews: any = null;
  public click(val: any, path: string): void {
    // 点击触发事件
    // console.log(val.target.options.other);
    // console.log("333333333333333333333:", val);
    if (path == "运行监视") {
      let query = {
        stationId: val.myData.BDZID,
      };
      this.$router.push({
        path: "/operationmonitor/index",
        query: query,
      });
    } else if (path == "一次接线图") {
      if (val.myData) {
        let query = {
          stationId: val.myData.BDZID,
          type: "一次接线图",
        };
        this.$router.push({
          path: "/operationmonitor/wiring",
          query: query,
        });
      }
      // this.$router.push({
      //     path: "/operationmonitor/wiring",
      //     query: val,
      //   });
    } else {
      // 变电站点击触发事件
      // console.log(path);
      if (val.myData) {
        var item: any = {
          code: val.myData.BDZID,
          name: val.myData.BDZMC,
        };
        AuxiliaryMonitorModule.setStationName(item);
        this.$router.push({
          path: "/auxiliarymonitor/firefight",
          query: item,
        });
      }
    }
  }
  currentBdz = "";
  get options() {
    let mapDataAll = lodash.cloneDeep(this.mapDataAll);
    let first = {
      BDZID: "",
      BDZMC: "全部",
      X: "117.0549344",
      Y: "36.16290326",
    };
    mapDataAll.unshift(first);
    mapDataAll.forEach((v) => {
      v.isLeaf = true;
    });
    console.log(111, mapDataAll);
    return mapDataAll;
  }
  resetData = null;
  handleNodeClick(data) {
    let options = this.options;
    let map = this.mapviews.map;
    if (map) {
      if (data.BDZID) {
        this.animateTo([data.X, data.Y], 14);
      } else {
        this.animateTo(this.resetData.center, this.resetData.zoom);
      }
    }
    HomepageModule.setMapByStation({
      stationId: data.BDZID,
      stationMc: data.BDZMC,
    });
  }
  setResetData() {
    let map = this.mapviews.map;
    if (map) {
      if (!this.resetData) {
        this.resetData = {
          center: map.getCenter(),
          zoom: map.getZoom(),
        };
      }
    }
  }
  animateTo(center, zoom) {
    let map = this.mapviews.map;
    if (map) {
      map.animateTo(
        {
          zoom,
          center,
        },
        {
          duration: 1000,
        }
      );
    }
  }
  private mounted(): void {
    this.mapviews =
      this.mapviews ||
      new maptalks("home-mapviews", { isClickMarkerMenu: true });
    this.mapviews.addClickEvent(this.click);
    this.queryMapXY();
    this.setResetData();
  }

  // 表格数据查询
  queryIntegrageAlarmList() {
    let mapByStation = HomepageModule.mapByStation;
    let from = {
      station: mapByStation.stationId,
      clzt: 0,
      page: 1,
      size: 200,
    };
    (this as any).$services
      .queryIntegrageAlarmList({ data: from, method: "get" })
      .then((result: any) => {
        let data = result.data || {};
        let records = data.records || [];
        let mapDataErr = [];
        if (records && records.length) {
          records.map((v, i) => {
            mapDataErr.push(v.BDZID);
          });
        }
        mapDataErr = [...new Set(mapDataErr)];

        this.mapDataErr = mapDataErr;
        // console.log(mapDataErr);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // get getterStationState() {
  //   return GetSocketModule.getterStationState;
  // }
  // @Watch("getterStationState", { deep: true })
  // watchGetterStationState(newData, oldData) {
  //   let successData = newData.success;
  //   let errData = newData.err;
  //   if (successData && successData.length) {
  //     this.updateMarkerSuccessState(successData);
  //   }
  //   if (errData && errData.length) {
  //     // 这里做假数据了
  //     // if (errData.indexOf("1500000001") >= 0) {
  //     //   errData = ["1500000001"];
  //     //   this.updateMarkerErrState(errData);
  //     //   return false
  //     // }
  //     // 这里是真的
  //     this.updateMarkerErrState(errData);
  //   }
  // }

  // 更新变电站状态为正常运行
  updateMarkerSuccessState() {
    let arr = this.mapDataSuccess;
    let getErrMarkerObj = this.mapviews.getErrMarkerObj();
    arr.forEach((v) => {
      let item = getErrMarkerObj[v];
      if (item) {
        this.mapviews.updateMarkerSuccessState(item);
      }
    });
  }
  // 更新变电站状态为异常运行
  updateMarkerErrState() {
    let arr = this.mapDataErr;
    let getErrMarkerObj = this.mapviews.getSuccessMarkerObj();
    arr.forEach((v) => {
      let item = getErrMarkerObj[v];
      if (item) {
        this.mapviews.updateMarkerErrState(item);
      }
    });
  }
  mapDataAll = [];
  @Watch("mapDataAll")
  setAllMap() {
    this.mapviews.addnormal(this.mapDataAll);
  }
  mapDataSuccess: any = [];
  @Watch("mapDataSuccess")
  setSuccessMap() {
    this.updateMarkerSuccessState();
  }
  mapDataErr: any = [];
  @Watch("mapDataErr")
  setErrMap() {
    // console.log(2345, this.mapDataErr);
    this.updateMarkerErrState();
  }
  queryMapXY() {
    (this as any).$services
      .queryMapXY()
      .then((result: any) => {
        this.mapDataAll = result.data;
        this.queryIntegrageAlarmList();
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.home-mapviews {
  width: 100%;
  height: 100%;
  position: relative;
  .select {
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0rem;
    .arrow {
      pointer-events: auto;
      width: 0.4rem;
      height: 1rem;
      // background: rgba(17, 38, 138, 0.9);
      // border: 1px rgba(14, 80, 180, 0.9) solid;
      color: #fff;
      cursor: pointer;
      > div {
        font-size: 0.3rem;
      }
    }
    .treecon {
      width: 2rem;
      margin-left: 0.06rem;
      padding: 0.16rem 0.2rem 0.2rem 0;
      pointer-events: auto;
      background: rgba(17, 38, 138, 0.9);
      box-shadow: 0 0 2px 2px rgba(14, 80, 180, 0.9) inset;
      border-radius: 4px;
      max-height: 90%;
      overflow: auto;
      user-select: none;
      .inputcon {
        margin-left: 0.2rem;
      }
    }
  }
}
#home-mapviews {
  width: 100%;
  height: 100%;
}
.lenged {
  position: absolute;
  bottom: 0.2rem;
  right: 0.3rem;
  font-size: 0.18rem;
  img {
    width: 0.3rem;
    height: 0.3rem;
  }
}
</style>
<style lang="scss">
.slide-fade-enter-active {
  transition: all 0.3s;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(-60px);
  opacity: 0;
}
</style>

